<script>
import { defineComponent, computed, ref, watch } from 'vue'
import { createNamespace, transformStyleSize, getInputValue } from '../utils'
import FanIcon from '../icon/icon.vue'

export default defineComponent({
	name: createNamespace('Textarea')[0],
	options: {
		// https://uniapp.dcloud.io/matter.html#mp
		virtualHost: true
	},
	components: { FanIcon },
	props: {
		label: String,
		labelStyle: String,
		inputStyle: String,
		limitStyle: String,
		placeholder: String,
		placeholderColor: {
			type: String,
			default: '#C4C7CC'
		},
		readonly: {
			type: [Boolean, String],
			default: false
		},
		disabled: {
			type: [Boolean, String],
			default: false
		},
		modelValue: {
			type: [String, Number],
			default: ''
		},
		maxLength: {
			type: [String, Number],
			default: -1
		},
		showWordLimit: {
			type: Boolean,
			default: false
		},
		prefixIcon: String,
		prefixColor: {
			type: String,
			default: 'var(--fan-black-2)'
		},
		prefixSize: {
			type: [String, Number],
			default: 17
		},
		border: {
			type: [Boolean, String],
			default: false
		}
	},
	emits: ['update:modelValue', 'input', 'change', 'confirm', 'blur', 'focus'],
	setup(props, { emit }) {
		const theStyle = computed(() => {
			return `--fan-textarea-placeholder-color:${props.placeholderColor};`
		})
		const labStyle = computed(() => transformStyleSize(props.labelStyle))
		const inStyle = computed(() => transformStyleSize(props.inputStyle))
		const limStyle = computed(() => transformStyleSize(props.limitStyle))

		const innerValue = ref('')
		watch(innerValue, (val) => {
			if (val !== props.modelValue) emit('update:modelValue', val)
			emit('input', val)
		})
		watch(
			() => props.modelValue,
			(val) => {
				if (val !== innerValue.value) innerValue.value = val
			},
			{ immediate: true }
		)

		const handleInput = (e) => (innerValue.value = getInputValue(e))
		const onFocus = (e) => emit('focus', e)
		const onBlur = (e) => emit('blur', e)
		const handleChange = (e) => emit(e, innerValue.value)

		return {
			theStyle,
			labStyle,
			inStyle,
			limStyle,
			innerValue,
			handleInput,
			onFocus,
			onBlur,
			handleChange
		}
	}
})
</script>

<template>
	<div :style="theStyle" class="fan-textarea__body" :class="{ 'fan-hairline--bottom': border }">
		<div class="fan-textarea__wrap">
			<FanIcon v-if="prefixIcon" :name="prefixIcon" :color="prefixColor" :size="prefixSize" style="margin-right:4px;" />
			<div v-if="label" :style="labStyle" class="fan-textarea__label">{{ label }}</div>
			<textarea class="fan-textarea" :class="{ 'fan-textarea--disabled': disabled }" :maxlength="maxLength"
				:style="inStyle" :value="innerValue" :placeholder-style="`color:${placeholderColor};`"
				:placeholder="placeholder" :readonly="readonly" :disabled="disabled || readonly" @input="handleInput"
				@blur="onBlur" @focus="onFocus" @change="handleChange('change')" @keyup.enter="handleChange('confirm')"
				@confirm="handleChange('confirm')"></textarea>
		</div>
		<div v-if="maxLength > 0 && showWordLimit" :style="limStyle" class="fan-textarea__limit">
			{{ innerValue.length > maxLength ? maxLength : innerValue.length }}/{{ maxLength > 0 ? maxLength : 0 }}
		</div>
	</div>
</template>

<style lang="less">
.fan-textarea {
	font-size: inherit;
	height: 40px;
	line-height: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin: 0;
	padding: 0 4px;
	height: 60px;
	flex: 1;
	overflow: hidden;
	background: transparent;
	border: 0;
	outline: none;
	resize: none;

	&::placeholder {
		color: var(--fan-textarea-placeholder-color);
	}

	&__label {
		padding-right: 4px;
		align-self: flex-start;
		line-height: 1.2;
	}

	&__wrap {
		display: flex;
		min-width: inherit;
	}

	&__body {
		padding: 6px 10px;
		min-width: 0;
	}

	&__limit {
		color: var(--fan-black-6);
		font-size: var(--fan-font-size-sm);
		text-align: right;
		margin-top: 4px;
		word-wrap: break-word;
	}

	&--disabled {
		opacity: var(--fan-disabled-opacity);
		cursor: not-allowed;
	}
}
</style>
